<template>
  <el-form ref="modifyForm" :model="modifyForm" :rules="modifyRules">
    <el-tooltip v-model="capsTooltip" content="大写字母" placement="right" manual>
      <el-form-item label="原密码" prop="oldPassword">
        <el-input
          key="oldPassword"
          ref="oldPassword"
          v-model="modifyForm.oldPassword"
          type="password"
          placeholder="请输入原密码"
          name="oldPassword"
          tabindex="1"
          autocomplete="off"
          @keyup.native="checkCapslock"
          @blur="capsTooltip = false"
        />
      </el-form-item>
    </el-tooltip>
    <el-tooltip v-model="capsTooltip" content="大写字母" placement="right" manual>
    <el-form-item label="新密码" prop="newPassword">
      <el-input
        key="newPassword"
        ref="newPassword"
        v-model="modifyForm.newPassword"
        type="password"
        placeholder="请输入新密码"
        name="newPassword"
        tabindex="2"
        autocomplete="off"
        @keyup.native="checkCapslock"
        @blur="capsTooltip = false"
      />

    </el-form-item>
    </el-tooltip>
    <el-tooltip v-model="capsTooltip" content="大写字母" placement="right" manual>
      <el-form-item label="确认密码" prop="new2Password">
        <el-input
          key="new2Password"
          ref="new2Password"
          v-model="modifyForm.new2Password"
          type="password"
          placeholder="请现输一次新密码"
          name="new2Password"
          tabindex="3"
          autocomplete="off"
          @keyup.native="checkCapslock"
          @blur="capsTooltip = false"
          @keyup.enter.native="submit"
        />

      </el-form-item>
    </el-tooltip>

    <el-form-item>
      <el-button :loading="loading" type="primary" @click.native.prevent="submit('modifyForm')">修改</el-button>
    </el-form-item>
  </el-form>
</template>

<script>

  import store from '@/store'

  import {modifyPwd,logout} from '@/api/user'
  import md5 from 'js-md5';

  export default {
  props: {
    user: {
      type: Object,
      default: () => {
        return {

        }
      }
    }
  },
  data() {
    const validatePassword = (rule, value, callback) => {
      if (value.length < 6) {
        callback(new Error('密码长度不能小于6位'))
      } else {
        callback()
      }
    }
    const validateNew2Password = (rule, value, callback) => {
      if (this.modifyForm.newPassword.length>0 && value!=this.modifyForm.newPassword) {
        callback(new Error('二次输入的密码不一至'))
      } else {
        callback()
      }
    }
    return {

      modifyForm:{
        oldPassword:'',
        newPassword: '',
        new2Password: '',
      },
      modifyRules: {
        oldPassword: [{ required: true, trigger: 'blur', validator: validatePassword }],
        newPassword: [{ required: true, trigger: 'blur', validator: validatePassword }],
        new2Password: [{ required: true, trigger: 'blur', validator: validateNew2Password }]
      },
      capsTooltip:false,
      loading:false
    }
  },
    mounted() {
      if (this.modifyForm.oldPassword === '') {
        this.$refs.oldPassword.focus()
      } else if (this.modifyForm.newPassword === '') {
        this.$refs.newPassword.focus()
      } else if (this.modifyForm.new2Password === '') {
        this.$refs.new2Password.focus()
      }
    },
  methods: {
    checkCapslock(e) {
      const { key } = e
      this.capsTooltip = key && key.length === 1 && (key >= 'A' && key <= 'Z')
    },
    async logout() {
      await this.$store.dispatch('user/logout')
      this.$router.push(`/login`)
    },
    submit() {
      var _this = this
      this.$refs.modifyForm.validate(valid => {
        if (valid) {
          _this.loading = true;
          modifyPwd({oldPassword:md5(_this.modifyForm.oldPassword),newPassword:md5(_this.modifyForm.newPassword)}).then(response => {
            _this.loading = false;
            _this.$message({
              message: "修改成功,请重新登录",
              offset: 120,
              center: true
            });

            _this.logout()

          }).catch(error => {
            _this.loading = false;
          });
        } else {
          console.log('error submit!!')
          return false
        }
      })
    }
  }
}
</script>
